<template>
    <z-paging>
        <view class="heqader_box" style="background-image: url('https://morgan.dingxians.cn/static/avtivey/0.png');">
            <hedsty></hedsty>
        </view>
        <!-- <view class="hedongtab">
            <view class="dange_hedx_box" :class="hdtabId == item.id ? 'dange_hedx_box1' : ''"
                v-for="(item, index) in hdTabList" :key="index" @click="tabqh(item)">
                {{ item.text }}
            </view>
        </view>
        <view class="tabs_bosxs">
            <view class="dange_xuanze_tab_vbox" :class="tabsId == item.id ? 'dange_xuanze_tab_vbox1' : ''"
                v-for="(item, index) in tabsList" :key="index" @click="tabsBtn(item)">{{ item.text }}
            </view>
        </view> -->

        <view class="times_box" style="background-image: url('https://morgan.dingxians.cn/static/avtivey/1.png');">
            <!-- 任务截止时间：2024-8-22 12:00:00 -->
        </view>

        <view class="bot_box">
            <view class="dange_hjd_list_box" v-for="(item, index) in taskList" :key="index"
                style="background-image: url('https://morgan.dingxians.cn/static/avtivey/4.png');">
                <view class="left_box">
                    <image src="https://morgan.dingxians.cn/static/avtivey/6.png" mode="scaleToFill" />
                </view>
                <view class="cneter_box">
                    <view class="t_box">{{ item.title }}</view>
                    <view class="tc_box">完成任务，即可领取</view>
                    <view class="b_box">奖励：{{ item.reward_title }}元素</view>
                </view>
                <view class="anniu_box" style="background-image: url('https://morgan.dingxians.cn/static/avtivey/2.png');" v-if="item.status == 0">未达成</view>
                <view class="anniu_box" style="background-image: url('https://morgan.dingxians.cn/static/avtivey/2.png');" v-else-if="item.status == 2">已领取</view>
                <view class="anniu_box" style="background-image: url('https://morgan.dingxians.cn/static/avtivey/5.png');" v-else @click="lingqu(item)">领取</view>
                <view class="dqls_box">当前流水：{{ item.nums }}</view>
            </view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            //活动tab
            hdTabList: [
                // {
                //     id: 1,
                //     text: '每日活动'
                // },
                {
                    id: 2,
                    text: '周期活动'
                },
            ],
            hdtabId: 2,
            tabsList: [
                {
                    id: 1,
                    text: '全部'
                },
                // {
                //     id: 2,
                //     text: '全局流水'
                // },
                // {
                //     id: 3,
                //     text: '无限流水'
                // }
            ],
            tabsId: 1,
            taskList:[]
        }
    },
    onLoad() {

    },
    onShow() {
this.getList()
    },
    methods: {
        tabqh(item) {
            this.hdtabId = item.id
            this.getList()
        },
        tabsBtn(item) {
            this.tabsId = item.id
            this.getList()
        },
			getList(){
				let data = {
					type: this.hdtabId
				}
				this.$Request.get(this.$api.user.tasks, data).then(res => {

					console.log(res)
					if (res.code == 200) {
						this.taskList = res.data
					}
				})
			},
        lingqu(item){
            this.$Request.post(this.$api.user.tasks + `/${item.id}`).then(res => {
                    if (res.code == 200) {
                        this.$msg(res.msg)
                        this.getList()
                    }
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 677rpx;
    background-size: 100% 100%;
    margin-bottom: 40rpx;
}

.hedongtab {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    padding-left: 23rpx;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30rpx;

    .dange_hedx_box {
        width: 161rpx;
        height: 80rpx;
        background-size: 100% 100%;
        margin-right: 20rpx;
        font-family: text1;
        font-weight: normal;
        font-size: 30rpx;
        color: rgba(255, 255, 255, .4);
        line-height: 80rpx;
        font-style: italic;
        text-align: center;

        &.dange_hedx_box1 {
            font-family: text1;
            font-weight: normal;
            font-size: 30rpx;
            color: #EED52E;
            font-style: italic;
        }
    }
}

.tabs_bosxs {
    width: 100%;
    height: 50rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 41rpx;

    .dange_xuanze_tab_vbox {
        padding: 0 28rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        margin-right: 30rpx;
        background: rgba(255, 255, 255, .3);
        border-radius: 25rpx;
        color: #ccc;
        font-size: 28rpx;

        &.dange_xuanze_tab_vbox1 {
            color: #FF4545;
            background: #501414;

        }
    }


}

.times_box {
    width: 750rpx;
    height: 53rpx;
    background-size: 100% 100%;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFA8A6;
    line-height: 40rpx;
    margin-bottom: 26rpx;
}

.bot_box {
    width: 690rpx;
    height: 854rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    overflow-y: auto;

    .dange_hjd_list_box {
        width: 690rpx;
        height: 220rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 30rpx 35rpx;
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-bottom: 40rpx;

        .left_box {
            width: 160rpx;
            height: 160rpx;
            background: rgba(23, 1, 3, 0.5);
            border-radius: 10rpx;
            border: 2px solid #FFEDD7;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 19rpx;

            image {
                width: 107rpx;
                height: 110rpx;
            }
        }

        .cneter_box {
            height: 160rpx;
            box-sizing: border-box;
            padding-top: 18rpx;

            .t_box {
                height: 27rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #FFFFFF;
                line-height: 27rpx;
                margin-bottom: 25rpx;
            }

            .tc_box {
                height: 21rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
                line-height: 21rpx;
                margin-bottom: 29rpx;
            }

            .b_box {
                height: 23rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 23rpx;
            }
        }

        .anniu_box {
            width: 188rpx;
            background-size: 100% 100%;
            height: 60rpx;
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 60rpx;
            position: absolute;
            bottom: 42rpx;
            right: 35rpx;
        }

        .dqls_box {
            height: 19rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 18rpx;
            position: absolute;
            top: 54rpx;
            right: 33rpx;
        }
    }
}
</style>